/* eslint-disable n/no-unpublished-require */
/* eslint-disable import/no-extraneous-dependencies */
// @ts-check

/* spell-checker: disable */
"use strict";

const path = require("node:path");
const { AngularWebpackPlugin } = require("@ngtools/webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

/**
 * @power ms-vscode.ts-file-path-support
 * @template TBaseDir
 * @typedef {string & { baseDir?: TBaseDir }} RelativeFilePath
 */
// /**
//  * @template Out
//  * @template {Out} In
//  * @typedef {In & { [Key in Exclude<keyof In, keyof Out>]: never }} SameShape
//  */

/**
 * @param {RelativeFilePath<'$dir'>} p
 * @returns {string & {__path__?: symbol}}
 */
const pwd2 = (p) => path.resolve(__dirname, p);

/**
 * @type {import('webpack').Configuration}
 */
const config = {
  context: pwd2("."),
  entry: {
    main: {
      import: pwd2("./src/bootstrap.hybrid.ts"),
      chunkLoading: "import",
      dependOn: ["tw", "prelude"],
    },
    prelude: {
      import: pwd2("./src/prelude.js"),
      library: {
        type: "window",
      },
      chunkLoading: "jsonp",
    },
    tw: {
      import: [pwd2("./src/tw.pcss")],
      chunkLoading: "jsonp",
    },
  },
  mode: process.env.NODE_ENV || "development",
  devtool:
    process.env.NODE_ENV !== "production"
      ? "cheap-module-source-map"
      : "source-map",
  optimization: {
    minimize: false,
    splitChunks: {
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "initial",
        },
      },
    },
  },
  devServer: {
    port: 7353,
    hot: true,
    liveReload: false,
  },
  resolve: {
    extensions: [".ts", ".js", ".mjs", ".json"],
    // alias: {
    //   "#ngx-app": path.resolve(__dirname),
    // },
  },
  output: {
    filename: "ngx-app.[contenthash:8].js",
    chunkFilename: "chunks/ngx-app-[contenthash:8].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(t|j)s$/i,
        use: [
          {
            loader: "@ngtools/webpack",
          },
          // {
          //   loader: "@swc-node/loader",
          //   options: {
          //     compilerOptions: {
          //       module: "esnext",
          //       moduleResolution: "bundler",
          //       strict: true,
          //       experimentalDecorators: true,
          //       emitDecoratorMetadata: true,
          //       useDefineForClassFields: false,
          //     },
          //   },
          // },
        ],
      },
      {
        test: /\.(pc|le|c)ss$/i,
        oneOf: [
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/i,
            use: [
              "style-loader",
              "css-loader",
              {
                loader: "less-loader",
                options: /**
                 * @import less from 'less'
                 * @type {Less.Options}
                 */ (
                  {
                    // globalVars: {
                    //   // add your global variables here
                    //   primaryColor: "#007bff",
                    // },
                  }
                ),
              },
            ],
          },
          {
            test: /\.pcss$/i,
            // type: "css/auto",
            // type: "javascript/auto",
            use: [
              "style-loader",
              {
                // CSSStyleSheet
                loader: "css-loader",
                // options: {
                //   exportType: "css-style-sheet",
                // },
              },
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: require("./postcss.config.cjs"),
                },
              },
            ],
          },
        ],
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      },
    ],
  },
  plugins: [
    new AngularWebpackPlugin({
      tsconfig: pwd2("./tsconfig.json"),
      jitMode: true,
      // directTemplateLoading: false,
    }),
    new HtmlWebpackPlugin({
      template: pwd2("./src/index.html"),
    }),
  ],
};

module.exports = config;
